<template>
  <div class="container-width app-container">
    <itemLabel name="热门老师" :isHot="true" :hot="5" style="margin-top:0"></itemLabel>
    <el-row type="flex" style="flex-wrap: wrap" justify="space-between">
      <el-col
        :span="11"
        class="teacher_item"
        v-for="(teacher, index) in teachers"
        :key="`teacher_${index}`"
      >

         <teacherItem :teacher="teacher"></teacherItem>
    
       
      </el-col>
    </el-row>
<el-empty v-if="teachers.length<=0" ></el-empty>
    <el-pagination
      class="pagination"
      @current-change="getTeacherList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import teacherItem from "/@/components/teacherItem/index.vue";
import itemLabel from "/@/components/itemLabel/index.vue";
import { teacherList } from "/@/api/teacherApi";
export default {
  components: {
    teacherItem,
    itemLabel
  },
  data() {
    return {
      teachers: [],
      pageSize:20,
      total:0
    };
  },
  mounted() {
    this.getTeacherList();
  },
  methods: {
    getTeacherList(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;
      teacherList({
        offset: offset,
        size: this.pageSize,
        ...params,
      })
        .then((res) => {
          const { teacherInfos, total } = res;
          this.teachers = teacherInfos;
          this.total = total;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style  scoped>
.teacher_item{
  margin-bottom: 20px;
}
</style>